<template>
  <main>
    <div class="flex flex-row">
      <div class="p-4 w-1/5">
        <ContentList path="/" v-slot="{ list }">
          <div v-for="article in list" :key="article._path">
            <div :class="articlePath === article._path ?  'text-blue-500':''" class=" mt-4 hover:text-blue-500 cursor-pointer text-black" @click="clickRow(article._path + '')">
              <h2>{{ article.title }}</h2>

            </div>
          </div>
        </ContentList>
      </div>
      <div class="p-4 w-4/5" >
        <ContentDoc :path="articlePath" >
          <template v-slot="{ doc }">
            <article>``
              <ContentRenderer :value="doc" class="prose"/>
            </article>
          </template>
          <template #not-found>
            <h1>Document not found</h1>
          </template>
          <template #empty>
            <h1>Document is empty</h1>
          </template>

        </ContentDoc>

      </div>
    </div>

  </main>
</template>

<script lang="ts" setup>
const articlePath = ref('/')
const clickRow = (path:string)=>{
  articlePath.value = path
}

</script>

<style lang="scss" scoped>
.item-row-base {
  width: 100%;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  cursor: pointer;
}
.item-row {
  width: 600px;
}

</style>
